<h2>Reports</h2>
<script type="text/javascript">
    $('.scrollTable').dataTable({ "sPaginationType": "full_numbers", "bRetrieve": true });
</script>
    <table class="scrollTable">
        <thead>
            <tr>
                <th>Partner or person</th>
                <th>Date</th>
                <th>Download</th>
            </tr>
        </thead>
        <tbody>
            <? for($i=1; $i<=20; $i++) {
                if($i % 2) {
                    echo '<tr>';
                    echo '<td>Some partner</td>';
                    echo '<td>A page name</td>';
                    echo '<td>A. Boot</td>';
                    echo '</tr>';
                }
                else {
                    echo '<tr>';
                    echo '<td>Some other partner</td>';
                    echo '<td>A new page name</td>';
                    echo '<td>B. Buurman</td>';
                    echo '</tr>';
                }
            } ?>
        </tbody>
    </table>
    <input class="button addButton" type="button" name="addReport" id="addReport" value="Add"/>
<div class="generateReport">
    <div class="reportField">
        <label>Choose report type:</label>
        <select name="reportType" id="reportType">
            <option>Author</option>
            <option>Partner</option>
        </select>
    </div>
    <div class="reportField">
        <label>Choose author or partner to report:</label>
        <input type="text" name="reportAuthorPartner" id="reportAuthorPartner"/>
    </div>
    <div class="reportField">
        <input type="button" class="button" id="generateReport" value="Generate report"/>
    </div>
    
    <div class="report">
        <label>Partner:</label>
        <label>HU University of Applied Sciences</label>
         <table class="eventTable" style="margin-left:12px;">
            <thead>
                <tr class="head">
                    <th class="nameCell">Pages written:</th>
                    <th class="wideCell">Approved in 1 time:</th>
                    <th class="wideCell">Approved in ... times:</th>
                    <th class="narrowCell">Edited:</th>
                </tr>
            </thead>
            <tbody>
                <? for($i=1; $i<=20; $i++) {
                    if($i % 2) {
                        echo '<tr>';
                        echo '<td class="nameCell">Some partner</td>';
                        echo '<td class="wideCell">A page name</td>';
                        echo '<td class="wideCell">A. Boot</td>';
                        echo '<td class="narrowCell alignRight">12/04/2011</td>';
                        echo '</tr>';
                    }
                    else {
                        echo '<tr>';
                        echo '<td class="nameCell">Some other partner</td>';
                        echo '<td class="wideCell">A new page name</td>';
                        echo '<td class="wideCell">B. Buurman</td>';
                        echo '<td class="narrowCell alignRight">11/05/2011</td>';
                        echo '</tr>';
                    }
                } ?>
            </tbody>
        </table>
    </div>
    
    <input class="button" type="button" name="saveReport" id="saveReport" value="Save" style="float:right; margin:12px;"/>
</div>